<template>

  <div class="home-detail-recommend">
    <div class="recommend-title">
      推荐
    </div>
    <van-swipe :autoplay="0" indicator-color="white" @change="onChange" class="custom-swipe">
      <van-swipe-item v-for="index in column" :key="index" >
        <div class="recommend-page">
          <div v-for="indey in 3" class="recommend-page-item" :class="{centerItem: index % 2 == 0}">
              <img :src="getRecommendData(index,indey).imagePath | getAllImgPath">
              <div class="recommend-page-name">
                {{getRecommendData(index,indey).name}}
              </div>
              <div class="price">
                ¥<span>234</span>
              </div>
          </div>
        </div>
      </van-swipe-item>
      <div class="custom-indicator"  slot="indicator">
        <div v-for="index in column" :key="index" class="custom-indicator-item">
          <div class="indicator" :class="{indicatorSelected: indicatorSelect(index)}"></div>
        </div>
      </div>
    </van-swipe>

  </div>

</template>

<script>

  import Vue from 'vue'
  import {Swipe, SwipeItem} from 'vant'
  Vue.use(Swipe).use(SwipeItem)


  export default {
    name: "HomeDetailRecommend",
    props:{

      recommends:{

        type:Array,
        default(){

          return []
        }
      }
    },
    data:function(){

      return {

        currentIndex:0
      }
    },
    computed:{

      column(){

        return this.recommends.length / 3;
      }
    },
    methods:{

      getRecommendData(row, col){

        return this.recommends[(row - 1) * 3 + col - 1];
      },
      onChange(index){

        console.log("onChange --- " + index);
        this.currentIndex = index;

      },
      indicatorSelect(index){

        return (index - 1) == this.currentIndex;
      }
    },
    filters:{

      getAllImgPath(subImgPath){

        return "http://img14.360buyimg.com/imgzone/" + subImgPath;
      }

    },
    components:{
      [Swipe.name]:Swipe,
      [SwipeItem.name]:SwipeItem
    }
  }
</script>

<style scoped>

  .home-detail-recommend{

    /*background-color: red;*/
    /*padding-bottom: 20px;*/
    /*overflow: auto;*/
  }

  .recommend-page{
    display: flex;
    border-bottom: 1px solid #ddd;
  }

  .recommend-page img{
    width: 100%;
  }

  .recommend-page-item{

    flex: 1;
  }

  .recommend-page-name{
    text-overflow: ellipsis;
    overflow: hidden;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    color: #333;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5em;
    padding: 5px 5px 0px;
  }

  .recommend-page-item .price{

    padding: 5px 5px;
  }

  .centerItem{

    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
  }

  .custom-swipe{
    position: relative;
    padding-top: 10px;
    padding-bottom: 20px;
  }

  .custom-indicator{

    position: absolute;
    /*background-color: green;*/
    bottom: 0px;
    width: 100%;
    /*!*left: 20px;*!*/
    /*left: 50%;*/
    /*margin-left: -10px;*/
    display: flex;
    justify-content: center;

  }
  .custom-indicator-item{

    width: 15px;
    height: 6px;
    /*background: yellow;*/
  }

  .indicator{

    width: 6px;
    height: 6px;
    margin: 0px auto;
    background-color: #c8c8c8;
    border-radius: 3px;
  }

  .indicatorSelected{

    width: 10px;
    background-color: #808080;
  }

  .recommend-title{

    border-top: 15px solid #eee;
    border-bottom: 1px solid #eee;
    height: 50px;
    line-height: 34px;
    padding-left: 10px;
  }


</style>
